<template>
	<view class="distributionDetails">
		<tui-navigation-bar   :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false"
			@init="initNavigation" title="我的分销明细" backgroundColor="#fff" color="#000">
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
			</view>
		</tui-navigation-bar>
		<view class="distributionDetails_haber"  :style="{ marginTop: marginTp + 'px' }"> 
			<view class="myEarnings"> 
					 <view class="bgImg"></view>
					 <view class="myEarnings_text">
						 <view class="tp"><text>我的收益</text></view>
						 <view class="ct"><text>￥{{balance}}</text></view>
						 <view class="bt"><text>结算时间：{{time}}</text></view>
					 </view>
					 <view class="myEarnings_withdraw">
							 <image class="withdrawImg" src="/static/user/my/bg_tixian@2x.png"></image>	 
							 <view class="withdrawImg_Text" @tap="tixian">
								 <text>提现</text>
								 <image class="rightImg" src="/static/user/my/icon_you_red@2x.png"></image>
							 </view>
					 </view>
			</view>
		</view>
		 
		<view class="distributionDetails_content"> 
			 <image class="conten_bg" :src="ossUrl+'2025/02/04/6c6e7ad8eaaa4b539414e4eb865c0da3.jpg'"></image>
			 <view class="half-circle"></view> 
			 <view class="income_details">
				<view class="income_title"><text>收支明细</text></view>
			   <view  v-for="(item,index) in list" :key="index">
				 <view @tap="goEarningsDetils(item)" class="income_item" v-if="item.type==0">
					 <view class="item_lt" >
						<image class="income_icon" src="/static/user/my/icon_shouyi@2x.png"></image>
						<view class="income_name">
							<view class="tp"><text>收益{{item.title}}</text></view>
							<view class="bt"><text>{{item.createTime}}</text></view>
						</view> 
					 </view>
					 <view class="item_rt">
						 <text v-show="item.amount">+{{item.amount}}</text>
					 </view>
				 </view>
				 <view class="income_item" v-else>
					 <view class="item_lt">
						<image class="income_icon" src="/static/user/my/icon_tixian@2x.png"></image>
						<view class="income_name">
							<view class="tp"><text>提现{{item.title}}</text></view>
							<view class="bt"><text>{{item.createTime}}</text></view>
						</view>
					 </view>
					 <view class="withdraw_rt">
						 <text v-show="item.amount">-{{item.amount}}</text>
					 </view>
				 </view>
				 </view>  
				 <view class="noneData" v-if="!list.length">
				 					<text>暂无数据</text>
				 </view>
			 </view>
			 
		</view>
		<tui-modal :Top="'-20vh'"  :show="modal" custom>
			<view class="tui-modal-custom">
				<view @tap="modal=false,show=false" style="text-align: right;width: 100%;"><text>取消</text></view>
				<view class="tui-form__box">
					<view class="tui-title">提现金额</view>
					<view class="tui-input__box" @tap="focus">
						<view class="tui-symbol">￥</view>
						<view class="tui-input">{{value}}</view>
						<view class="tui-cursor" v-if="cursor"></view>
					</view>
				</view>
				 <tui-digital-keyboard   :buttonText="text"   :show="show"
				 			 :disabled="value==''" :isDecimal="false"  @click="keyTap" @backspace="backspace" @confirm="confirm"></tui-digital-keyboard>
			</view>
		</tui-modal>
		<!-- 分享点击按钮 -->
		<!-- <image @tap="goCodeDetils" class="share_icon" src="/static/user/my/icon_tuiguangma@2x.png"></image> -->
	</view>
</template>

<script>  
	import { getOrderIncomeInfo,getBalance,getWithdrawSum,applyWithdraw} from "@/http/api/distribution/distribution.js"
	export default {
		data() {
			return { 
				top: 0, //标题图标距离顶部距离
				marginTp: 0,
				modal:false,
				list:[],//用户明细
				ossUrl: getApp().globalData.ossurl,//图片前缀
				show: false,
				value: '',
				cursor: false,
				text: '提现', 
				withdrawSum:0,
				time:this.$utils.getCurrentDate(),
				balance:null,//余额
			}
		},
		onLoad() { 
			let {startDate,endDate}=this.$utils.getLast30DaysRange()
			//查询明细
			getOrderIncomeInfo({
				type:1,
				starDate:startDate,
				endDate:endDate
				}).then(res=>{
				if(res.code===200){
					this.list=res.data
				}
			})
			//查询余额
			getBalance().then(res=>{
				if(res.code===200){
					this.balance=res.data*1
				}
			})
			//查询提现整数倍
			getWithdrawSum().then(res=>{
				console.log(res,'withdrawSum')
				if(res.code===200){
					this.withdrawSum=res.data*1
				}
			})
		},
		methods: {  
			initNavigation(e) {
				this.top = e.top;
				this.marginTp = e.height
			},
			back() {
				uni.navigateBack({
							        delta: 1
							    });;
			},
			tixian(){
				if(this.balance*1){
					this.modal=true
				}else{
					this.$utils.toast('暂无提现金额'); 
				}
			},
			goCodeDetils(){
				uni.navigateTo({
					url:'/pages/my/modules/extensionCode/extensionCode'
				})
			},
			goEarningsDetils(item){
				uni.navigateTo({
					url:'/pages/my/modules/earningsDetils/earningsDetils?id='+item.id+'&orderId='+item.orderId+'&amount='+item.amount
				})
			},
			focus() { 
					this.text = '提现';
					this.cursor = true;
					this.show = true;
				},
			keyTap(e) {
				console.log(e)
				let keyVal = e.value;
				let value = this.value;
				if (~value.indexOf('.') && keyVal == '.') return;
				//最大9位，自行控制即可
				if (value.length == 9) {
					this.tui.toast('超过限制位数，不可输入')
					return
				}
				if (!this.value && keyVal == '.') {
					this.value = '0.'
				} else {
					this.value = this.value + e.value;
				}
			},
			backspace(e) {
				let val = this.value;
				if (val) {
					this.value = val.substring(0, val.length - 1)
				}
			},
			confirm(e) { 
				console.log(this.value,this.withdrawSum)
				if(Number(this.value)%this.withdrawSum===0){ 
					applyWithdraw({amount:Number(this.value)}).then(res=>{
						console.log(res)
						if(res.code===200){
							 this.show = false;
							 this.cursor = false;
							 this.tui.toast('提现成功')
						}
					}).catch(err=>{
						console.log(err)
					})
				} 
			}
	},
}
</script>

<style lang="scss" scoped>
@import './myDistributionInfo.scss';
.noneData{  
	position: absolute;
	top: 200rpx;
	left:calc(50vw - 80rpx);
	width: 160rpx;
}
.tui-form__box {
	background-color: #fff;
		padding: 0 50rpx 60rpx;
		box-sizing: border-box;
	}

	.tui-title {
		padding: 60rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-input__box {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, .1);
		height: 88rpx;
		padding-bottom: 2rpx;
	}

	.tui-symbol {
		font-size: 60rpx;
		font-weight: bold;
	}

	.tui-input {
		font-size: 80rpx;
		line-height: 80rpx;
		font-weight: bold;
		padding-right: 6rpx;
	}

	.tui-cursor {
		display: block;
		width: 2px;
		border-radius: 2px;
		height: 88rpx;
		animation: blink 1s infinite steps(1, start)
	}

	@keyframes blink {
		0% {
			background-color: white;
		}

		50% {
			background-color: #5677fc;
		}

		100% {
			background-color: white;
		}
	}
</style>